<template>
	<el-card>
		<div style="font-weight:bold;margin-bottom:10px;">
			<el-icon><DataAnalysis /></el-icon> 订单完成情况
		</div>
		<div ref="chartRef" style="height:240px;width:100%;"></div>
	</el-card>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import * as echarts from 'echarts'
import { DataAnalysis } from '@element-plus/icons-vue' // 新增这一行


const props = defineProps({ data: Array })
const chartRef = ref()
let chart
const renderChart = () => {
	if (!chart) chart = echarts.init(chartRef.value)
	chart.setOption({
		tooltip: { trigger: 'axis' },
		legend: { data: ['实际完成', '计划数量'], top: 10 },
		grid: { left: 36, right: 18, bottom: 30, top: 48, containLabel: true },
		xAxis: {
			type: 'category',
			data: props.data.map(d => d.month)
		},
		yAxis: { type: 'value', minInterval: 1 },
		series: [
			{
				name: '实际完成',
				type: 'bar',
				data: props.data.map(d => d.done),
				barWidth: 22
			},
			{
				name: '计划数量',
				type: 'bar',
				data: props.data.map(d => d.planned),
				barWidth: 22
			}
		]
	})
}
onMounted(renderChart)
watch(() => props.data, renderChart)
</script>
  
